import { ProColumns, ProTable } from '@/components/Pro';
import { realTimeMonitoringControllerGlcOverview as overviewsList } from '@/services/ess/realTimeMonitoring';
import { DATABASE_TYPE_ENUM, fetchDictInfo } from '@/utils';
import React, { useEffect, useState } from 'react';
import { useIntl } from 'umi';
import { useSelectedDeviceNode } from '../../SelectedDeviceNodeContext';
import Styles from './index.less';

interface Item {
  label: string;
  value: string | number;
  remark?: string;
}

export const GLCOverview: React.FC = () => {
  const deviceNode = useSelectedDeviceNode();
  const [onlinState, setOnlieState] = useState<Item[]>([]);
  const [runState, setrunState] = useState<Item[]>([]);
  // const [chargeDischargeStatusOptions, setChargeDischargeStatusOptions] = useState([]);
  const intl = useIntl();
  useEffect(() => {
    (async () => {
      try {
        // 在线状态字典
        let OnlineState = await fetchDictInfo(DATABASE_TYPE_ENUM.ONLINE_STATUS);
        setOnlieState(OnlineState || []);

        //  运行状态字典
        let runstates = (await fetchDictInfo(DATABASE_TYPE_ENUM.PCS_STATUS)) || [];
        setrunState(runstates || []);
      } catch (error) {
        console.error(error);
      }
    })();
  }, []);

  const columns: ProColumns[] = [
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.GLCName' }),
      dataIndex: 'deviceName',
      valueType: 'text',
      render: (_, record) => record?.name,
    },
    {
      title: intl.formatMessage({ id: 'data.runningStatus' }),
      dataIndex: 'workState',
      valueType: 'select',
      fieldProps: {
        maxTagCount: 'responsive',
        options: runState,
      },
      render: (_, record) => {
        let arr = runState.filter((res) => Number(res?.value) === Number(record?.workState));

        return arr[0]?.label || '--';
      },
    },
    {
      title: intl.formatMessage({ id: 'data.onlineStatus' }),
      dataIndex: 'onlineState',
      valueType: 'select',
      fieldProps: {
        maxTagCount: 'responsive',
        options: onlinState,
      },
      render: (_, record) => {
        let arr = onlinState.filter((res) => Number(res?.value) === Number(record?.onlineStatus));

        return arr[0]?.label || '--';
      },
    },
    {
      title: intl.formatMessage({ id: 'data.gcbStatus' }),
      dataIndex: 'mainBreakerStatus',
      search: false,
    },
    // {
    //   title: intl.formatMessage({ id: 'data.gcbFault' }),
    //   dataIndex: 'faultStatus',
    //   search: false,
    // },
  ];

  const scroll = {
    x: 'max-content',
    y: 460,
  };

  return (
    <ProTable
      columns={columns}
      className={Styles.hideXscroll}
      params={{
        deviceCode: deviceNode?.deviceCode ?? undefined,
      }}
      request={async (values) => {
        try {
          let params = {
            areaId: deviceNode?.areaId?.toString() ?? undefined,
            deviceType: deviceNode?.deviceType ?? undefined,
            ...values,
          };

          let reslut = await overviewsList(params);

          let changeReslut = {
            ...reslut,
            data: reslut?.data?.dataList,
            total: reslut?.data?.dataList?.length,
          };
          return changeReslut;
        } catch (err) {
          console.log(err, '错误');
        }
      }}
      rowKey="key"
      search={{
        defaultCollapsed: false,
      }}
      pagination={{
        showQuickJumper: true,
      }}
      scroll={scroll}
      sticky
      dateFormatter="string"
      headerTitle={intl.formatMessage({ id: 'data.glcOverview' })}
      toolBarRender={false}
    />
  );
};
